<template>
  <div class="position-container" :style="{ height: `${targetHeight}px` }">
    <div class="list-area">
      <div v-for="(obj, index) in allObjects" :key="obj.id">
        <div v-if="obj.isSelected" :class="['obj-item', obj.isSelected ? 'selected' : '']">
          <div class="obj-info">
            <el-form ref="form" :model="obj" label-width="44px" label-position="left">
              <el-row class="obj-coords">
                <el-col class="coord" :span="24">
                  <el-form-item label="类型">
                    <el-select :value="obj.type" placeholder="请选择类型" ref="itemSelect"
                      @change="handleSelectItemValue2(obj, $event)">
                      <el-option v-for="item in positionType" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col class="coord" :span="24">
                  <dynamicForm ref="dynamicForm" :vrPanoramaArr="vrPanoramaArr" :allObjectsid="obj.allObjectsid"
                    :type="obj.type" :configFormOld="obj.configForm ? obj.configForm : {}"
                    @giveFormtoParent="giveFormtoParent" />
                </el-col>
                <el-col class="coord" :span="24">
                  <el-form-item label="点位">
                    <el-input v-model="obj.text" @input="updateObjText(obj)" />
                  </el-form-item>
                </el-col>
                <el-col class="coord" :span="24">
                  <el-form-item label="模型">
                    <el-select :value="obj.imgtarget.modelId" placeholder="请选择模型" ref="itemSelect"
                      @change="handleSelectItemValue(obj, $event)">
                      <el-option v-for="item in imgArr" :key="item.modelId" :label="item.modelName"
                        :value="item.modelId">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col class="coord small-col" :span="12">
                  <el-form-item label="X">
                    <el-input v-model.number="obj.x" type="number" @input="updateObjProperty(obj, 'x', $event)" />
                  </el-form-item>
                </el-col>
                <el-col class="coord small-col" :span="12">
                  <el-form-item label="Y">
                    <el-input v-model.number="obj.y" type="number" @input="updateObjProperty(obj, 'y', $event)" />
                  </el-form-item>
                </el-col>
                <el-col class="coord small-col" :span="12">
                  <el-form-item label="W">
                    <el-input v-model.number="obj.width" type="number" @input="updateObjProperty(obj, 'w', $event)" />
                  </el-form-item>
                </el-col>
                <el-col class="coord small-col" :span="12">
                  <el-form-item label="H">
                    <el-input v-model.number="obj.height" type="number" @input="updateObjProperty(obj, 'h', $event)" />
                  </el-form-item>
                </el-col>
                <el-col class="coord small-col" :span="12">
                  <el-form-item label="Angle">
                    <el-input v-model.number="obj.angle" type="number"
                      @input="updateObjProperty(obj, 'angle', $event)" />
                  </el-form-item>
                </el-col>
                <el-col class="coord small-col" :span="12">
                  <el-form-item label="编号">
                    <el-input v-model="obj.posNo" @input="updateObjProperty(obj, 'posNo', $event)"
                      :disabled="obj.posId ? true : false" />
                  </el-form-item>
                </el-col>
                <el-col class="coord" :span="24">
                  <el-form-item label="标签">
                    <tagFrom ref="tagFrom" :tags="obj.tags" :target="obj" @update:tagArr="handleTagArrUpdate" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <i class="el-icon-close" @click="deleteObject(index)" />
        </div>
      </div>
    </div>
    <MessageBox ref="messageBox" :title="messageBoxtitle" :buttons="customButtons" @close="onmsgClose" />
  </div>
</template>

<script>
import dynamicForm from "@/components/Dynamicform";
import MessageBox from "@/components/MessageBox/index.vue";
import tagFrom from "./tag-form.vue";
export default {
  name: "position-list",
  props: {
    allObjects: {
      type: Array,
      default: () => [],
    },
    positionType: {
      type: Array,
      default: () => [],
    },
    imgArr: {
      type: Array,
      default: () => [],
    },
    targetHeight: {
      type: Number,
      default: 0,
    },
  },
  components: {
    dynamicForm,
    tagFrom,
    MessageBox,
  },
  data() {
    return {
      messageBoxtitle: "",
      customButtons: [],
      vrPanoramaArr: []
    };
  },
  methods: {
    getvrPanoramaArr(arr) {
      console.log("arr", arr);
      this.vrPanoramaArr = [...arr];
    },
    onmsgClose() {
      console.log("确认框已关闭");
    },
    handleSelectItemValue2(item, value) {
      this.customButtons = [
        {
          text: "取消",
          action: () => this.$refs.messageBox.close(),
          type: "",
        },
        {
          text: "确定",
          action: () => {
            this.$refs.messageBox.close();
            this.$emit("handleSelectItemValue2", item, value);
          },
          type: "primary",
        },
      ];
      this.messageBoxtitle =
        "确定重新选择类型吗?此操作会让其丢失原来的类型属性";
      this.$refs.messageBox.open();
    },
    updateObjText(obj) {
      this.$emit("updateObjText", obj);
    },
    updateObjProperty(obj, property, value) {
      this.$emit("updateObjProperty", obj, property, value);
    },
    handleSelectItemValue(item, value) {
      this.$emit("handleSelectItemValue", item, value);
    },
    deleteObject(index) {
      this.$emit("deleteObject", index);
    },
    giveFormtoParent(formvalue) {
      if (formvalue && Object.keys(formvalue).length > 0) {
        this.vrPanoramaArr.map((item) => {
          if (item.value == formvalue.vrImageOid) {
            formvalue.vrImageName = item.label
          }
        })
      }
      // console.log("formvalue", formvalue);
      this.$emit("updateAllObjects", formvalue);
    },
    handleTagArrUpdate(tagArr, obj) {
      this.$emit("updateObjProperty", obj, "tags", tagArr);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/index.scss";

.position-container {
  width: 100%;
  height: auto;

  .list-area {
    width: 400px;
    height: 100%;
    overflow-y: auto;
    @include scrollBar2;
    padding: 5px;

    .obj-item {
      // width: calc(100% - 10px); /* 考虑左右间距 */
      width: 100%;
      height: auto;
      box-sizing: border-box;
      // border-radius: 15px;
      // border: 2px solid rgb(235, 238, 245);
      // box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
      padding: 10px 10px 0 10px;
      position: relative;

      .obj-info {
        .obj-coords {
          .small-col {
            .el-input {
              width: 120px;
            }

            .el-select {
              width: 120px;
            }
          }
        }
      }

      .el-icon-close {
        position: absolute;
        top: 0px;
        right: -5px;
        cursor: pointer;
        color: #ff4d4f;
        font-size: 18px;
        font-weight: bold;
      }
    }

    .selected {
      // border: 2px solid red;
    }
  }
}
</style>
